<template>
	<view class="" style="width: 100%">
		<!-- 竖版 -->
		<view class="way1" v-if="way == 0">
			<view class="au_progress_bar">
				<view class="progress_btn" @click="playAudio">
					<image :src="pauseImg" v-show="playFlag" mode=""> </image>
					<image v-show="!playFlag" :src="playImg" mode=""></image>
				</view>
				<view class="progress_bar">
					<view class="progress_bar_action" :style="{
              width: `${progressBarLeft}%`,
            }">
					</view>
					<view class="progress_bar_dian" :style="{
              left: `${progressBarLeft}%`,
            }">
						<audio style="text-align: left" :src="src" @timeupdate="timeupdate" id="au"></audio>
					</view>
				</view>
				<view class="del_btn" v-if="showDelBtn" @click.stop="deleteFn">
					<!-- <image src="@/static/images/my/icon_sczp_shanchu.png" mode="" class="del_btn"
						@click.stop="deleteFn"></image> -->
						<u-icon name="close" color="rgb(68, 68, 68)" size="16" ></u-icon>
				</view>
				
			</view>
			<view class="progress_num">
				<view>
					{{ currentDuration }}
				</view>
				<view>
					{{ totalDuration }}
				</view>
			</view>
		</view>
		<!-- 横板 -->
		<view class="way2" v-if="way == 1">
			<view class="au_progress_bar au_progress_bar2">
				<view class="progress_btn" @click="playAudio" v-if="isBtn">
					<image :src="pauseImg" v-show="playFlag" mode=""> </image>
					<image v-show="!playFlag" :src="playImg" mode=""></image>
				</view>
				<view class="left_time" :style="{color:color}">{{ currentDuration }}</view>
				<view class="progress_bar progress_bar2">
					<view class="progress_bar_action" :style="{
              width: `${progressBarLeft}%`,
            }">
					</view>
					<view class="progress_bar_dian" :style="{
              left: `${progressBarLeft}%`,
            }">
						<audio style="text-align: left" :src="src" @timeupdate="timeupdate" id="au"></audio>
					</view>
				</view>
				<view class="right_time" :style="{color:color}">{{ totalDuration }}</view>
				<view class="del_btn" v-if="showDelBtn" @click.stop="deleteFn">
					<!-- <image src="@/static/images/my/icon_sczp_shanchu.png" mode="" class="del_btn"
						@click.stop="deleteFn"></image> -->
						<u-icon name="close" color="rgb(68, 68, 68)" size="16" ></u-icon>
				</view>
			</view>
			<!-- <view class="progress_num">
        <view>
          {{ currentDuration }}
        </view>
        <view>
          {{ totalDuration }}
        </view>
      </view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			playImg: {
				type: String,
				default: "../../static/images/icon_wddc_yinpin_bofang.png",
			},
			pauseImg: {
				type: String,
				default: "../../static/images/icon_wddc_yinpin_zhanting.png",
			},
			src: {
				type: String,
				default: "https://huaxuxingqiu.demo.benfusite.com/uploads/10001/20231109/54fa42cae7c5ed18a382b2141ab13c47.mp3",
			},
			// 0竖版 1横版
			way: {
				type: Number,
				default: 0,
			},
			color: {
				type: String,
				default: '#eeeeee',
			},
			isBtn: {
				type: Boolean,
				default: true
			},
			showDelBtn: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				audio: null,
				// src: "https://huaxuxingqiu.demo.benfusite.com/uploads/10001/20231109/54fa42cae7c5ed18a382b2141ab13c47.mp3",
				playFlag: false,
				duration: 0,
				times: 0,
				progressBarLeft: 0,
				totalDuration: 0,
				currentDuration: "00:00",
			};
		},
		mounted() {
			this.audio = uni.createInnerAudioContext();
			this.audio.autoplay = true;
			this.getFileInfo();
		},
		methods: {
			timeupdate() {

			},
			getFileInfo() {
				this.audio = uni.createInnerAudioContext();
				this.audio.src = this.src;
				this.audio.onCanplay(() => {
					var time = this.audio.duration.toFixed(0);
					var min = Math.floor(time / 60);
					var second = time % 60;
					this.duration = second;
					this.times = time;
					this.totalDuration = `${min < 10 ? `0${min}` : min}:${
          second < 10 ? `0${second}` : second
        }`;
				});
				this.audio.onTimeUpdate((res) => {
					console.log("rrrrrrrr", this.audio.currentTime);
					let progressBarLeft = (this.audio.currentTime / this.times) * 100;
					this.progressBarLeft = progressBarLeft > 100 ? 100 : progressBarLeft;
					var min = Math.floor(this.audio.currentTime / 60);
					var second = Math.floor(this.audio.currentTime % 60);
					this.currentDuration = `${min < 10 ? `0${min}` : min}:${
          second < 10 ? `0${second}` : second
        }`;
				});
			},
			playAudio() {
				let Audio = this.audio;
				let that = this;
				if (this.playFlag) {
					//当前正在播放，切换效果，暂停播放
					this.playFlag = false;
					Audio.pause();
					// console.log('this.audioList[i].duration',this.chatRecordList[i].duration)
					// this.duration = this.chatRecordList[i].duration;
					// Audio.offCanplay();
					Audio.offTimeUpdate();
					console.log("点击正在播放的语音，暂停播放");
					return;
				}
				this.playFlag = true;
				Audio.src = this.src; //音频地址
				Audio.play(); //执行播放
				Audio.onPlay(function() {
					console.log("开始播放");
				});

				Audio.onError((res) => {
					that.playFlag = false;
					uni.showToast({
						title: res.errCode + "," + res.errMsg,
						icon: "none",
					});
				});
				Audio.onPause(function() {
					console.log("pause");
					that.playFlag = false;
				});
				Audio.onEnded(function() {
					console.log("end", that.times);
					that.playFlag = false;
				});
			},
			// 删除
			deleteFn() {
				this.$emit('deleteAudio')
			},
		},
	};
</script>

<style scoped lang="scss">
	.au_progress_bar {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 32rpx;

		.progress_btn {
			width: 34rpx;
			height: 34rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.progress_bar {
			// width: 572rpx;
			flex: 1;
			height: 8rpx;
			background: #d8d8d8;
			border-radius: 4rpx;
			margin-left: 25rpx;
			position: relative;

			.progress_bar_action {
				height: 8rpx;
				background: #55b877;
				border-radius: 4rpx;
			}

			.progress_bar_dian {
				width: 30rpx;
				height: 30rpx;
				background: #55b877;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				top: -10rpx;
			}
		}

		.progress_bar2 {
			margin-left: 10rpx;
		}
	}

	.au_progress_bar2 {
		margin-top: 0;
	}

	.progress_num {
		width: 100%;
		padding-left: 60rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		font-weight: 500;
		color: #444444;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left_time {
		font-size: 24rpx;
		color: #eeeeee;
		margin-left: 29rpx;
	}

	.right_time {
		font-size: 24rpx;
		color: #eeeeee;
		margin-left: 29rpx;
	}

	.del_btn {
		width: 32rpx;
		height: 32rpx;
		padding-left: 12rpx;
		display: flex;
		align-items: center;
	}
</style>